<template name="merchantverStep2">
	<view class="merchantverStep2">
		<view class="content">
			<view class="list_title">门店信息</view>
			<view class="list">
				<view class="item item_photo">
					<view class="item_title">门头照</view>
					<view class="item_text" @click="sheet.show = true">
						<image class="mtImg" :src="mtimgStr"></image>
						<u-icon class="item_text_back" name="arrow-right" color="#cccccc" size="22"></u-icon>
					</view>
				</view>
				<view class="item">
					<view class="item_title">门店名称</view>
					<view class="item_text">
						<input type="text" v-model="shopName" placeholder="请输入门店名称" />
					</view>
				</view>
				<view class="item">
					<view class="item_title">门店地址</view>
					<view class="item_text" @click="setLocation()">
						<input :value="shopAddress.province+shopAddress.city+shopAddress.district"
						 type="text" disabled="true" placeholder="请选择门店地址" />
						<u-icon class="item_text_back" name="arrow-right" color="#cccccc" size="22"></u-icon>
					</view>
				</view>
				<view class="item">
					<view class="item_title">详细地址</view>
					<view class="item_text"><input type="text" v-model="shopAddress.address" placeholder="请输入详细的门店地址" /></view>
				</view>
				<view class="item">
					<view class="item_title">经营品类</view>
					<view class="item_text" @tap="categoryObj.show=true">
						<input type="text" :value="categoryObj.categoryTargetName" disabled="true" placeholder="请选择经营品类" />
						<u-icon class="item_text_back" name="arrow-right" color="#cccccc" size="22"></u-icon>
					</view>
				</view>
				<view class="item">
					<view class="item_title">门店电话</view>
					<view class="item_text"><input type="number" v-model="phone" placeholder="请输入门店电话" /></view>
				</view>
			</view>
		</view>
		<view style="height: 120rpx;"></view>
		<view class="footer">
			<view class="btn">
				<button type="primary" @click="assistauthinfoFun()">下一步</button>
			</view>
		</view>
		
		<u-action-sheet :list="sheet.list" v-model="sheet.show" @click="photoSel"></u-action-sheet>
		<!-- 选择经营类目 -->
		<view>
			<w-picker
				:visible.sync="categoryObj.show"
				mode="linkage"
				:options="categoryObj.linkArr"
				:level="4"
				default-type="id"
				:default-props="categoryObj.categoryProp"
				@confirm="categoryFun($event,'linkage')"
				@cancel="onCancel"
				ref="linkage" 
			></w-picker>
		</view>
	</view>
</template>

<script>
	import { uploadimg,assistauthinfo,getbaseinfo } from '../../api/index.js';
	export default {
		name: "merchantverStep2",
		data() {
			return {
				mtimgStr:'../../static/img/creatStore_icon_storeDefault.png', //门头照
				shopName:'', //门店名称
				location:'', //门店地址
				shopAddress:{ //门店详细地址对象
					address:'', //详细地址
					longitude:'',
					latitude:'',
					province:'',
					city:'',
					district:'',
					adcode:''
				},
				categoryTarget:'', //当前选中的经营品类
				phone:'', //门店电话
				sheet:{
					list: [{
						text: '拍照'
					}, {
						text: '从相册中选择' 
					}],
					show: false
				},
				categoryObj:{
					show:false,
					categoryProp:{label:'name',value:'id',children:'child'},
					categoryTargetName:'',
					linkArr:[]
				},
				isfoodChain:false,
				tag:''
			}
		},
		mounted: function() {
			this.categoryObj.linkArr = this.$store.state.merchantver.categorys;
		},
		props:{
			shopData:''
		},
		methods: {
			onCancel:function(){
				this.categoryObj.show = false		
			},
			//获取地址数据及其他存储的数据
			getLocation:function(){
				this.location = this.$store.state.merchantver.location;
				if(this.location!=''){
					this.shopAddress.address = this.location.address;
					this.shopAddress.longitude = this.location.location.longitude;
					this.shopAddress.latitude = this.location.location.latitude;
					this.shopAddress.province = this.location.province;
					this.shopAddress.city = this.location.city;
					this.shopAddress.district = this.location.district;
					this.shopAddress.adcode = this.location.adcode;
					console.log(this.shopAddress)
				}
			},
			// 选择门店所在位置
			setLocation:function(){
				let that = this;
				// 选择地址
				uni.navigateTo({
					url:'../../view/selectAddress/selectAddress'
				})
			},
			//点击下一步函数
			assistauthinfoFun:function(){
				let that = this;
				let text = '';
				if(!this.mtimgStr){
					text = '请选择门头照';
				}else if(!this.shopName){
					text = '请输入门店名称';
				}else if(!this.location){
					text = '请选择门店地址';
				}else if(!this.shopAddress.address){
					text = '请输入详细的门店地址'
				}else if(!this.categoryTarget){
					text = '请选择经营类目'
				}else if(!this.phone){
					text = '请输入门店电话'
				}
				
				if(text == ''){
					assistauthinfo({
						uid:this.$store.state.merchantver.uid,
						door_head:this.mtimgStr,
						first_shop: this.shopData.first_shop, //是否是首家门店
						shop_name:this.shopName, //店铺名称
						address:this.shopAddress.address,//地址
						category:this.categoryTarget,//	经营类目
						service_phone:this.phone,//	联系电话
						longitude:parseInt(this.shopAddress.longitude),	//经度
						latitude:parseInt(this.shopAddress.latitude),//纬度
						adcode:this.shopAddress.adcode,		//地址码
						tag: this.tag//标签
					}).then((res) => {
						console.log(res);
						// {
						// 	uid:'1157558',
						// 	shop_sub_id:'10001344',
						// 	waimai_tag:5
						// }
						if(res.code == 0){
							uni.showModal({
								title:'提示',
								content: res.msg,
								complete:function(){
									that.$store.state.merchantver.isfoodChain = that.isfoodChain;
									that.$store.state.merchantver.suid = res.data.shop_sub_id;
									that.$emit('nextAfter');
								}
							})
						}else{
							uni.showToast({
								icon:'none',
								title:res.msg
							})
						}
					}).catch((res) => {
						console.log(res)
					})
				}else{
					uni.showToast({
						icon:'none',
						title:text
					})
				}
			},
			//修改图片逻辑
			async updateImgfun(base64){
				let that = this;
				// console.log(base64)
				let uploadimgData = await uploadimg({img:base64}); //base64转图片
				console.log(uploadimgData)
				if(uploadimgData.code == 0){
					this.mtimgStr = uploadimgData.data.url;
					console.log(this.mtimgStr)
				}else{
					uni.showToast({
						icon:'none',
						title:uploadimgData.res
					})
				}
			},
			//选择门头照
			photoSel:function(index){
				console.log(index)
				let that = this;
				let sourceType = [];
				if(index==0){
					sourceType = 'camera';
				}else{
					sourceType = 'album';
				}
				cm.chooseImage({
					count:1,
					sourceType:sourceType,
					success:function(res){
						let base64Obj = JSON.parse(res);
						let baseStr = '';
						if(index == 0){
							baseStr = base64Obj.base64String;
						}else{
							baseStr = base64Obj.base64StringArray[0];
						}
						that.updateImgfun(baseStr);
					},
					fail:function(){
						uni.showToast({
							icon:'none',
							title:'获取图片失败'
						})
					}
				});
			},
			//选择经营品类
			categoryFun:function(data){
				console.log(data);
				let dataArr = data.value;
				dataArr[0] == "2001"?this.isfoodChain=true:this.isfoodChain=false;
				
				let categoryTargetName = '';
				for(let key in data.obj){
					if(!!data.obj[key]){
						if(data.obj[key].name){
							categoryTargetName += data.obj[key].name+"-";
						}
					}
				}
				if(!!data.obj['col4'] && !!data.obj['col4'].id){
					this.categoryTarget = data.obj['col4'].id
				}else{
					this.categoryTarget = data.obj['col3'].id
				}
				categoryTargetName = categoryTargetName.substr(0,categoryTargetName.length-1)
				this.tag = data.obj['col1'].waimai_tag;
				this.categoryObj.categoryTargetName = categoryTargetName;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.merchantverStep2{
		.content{
			.list_title{
				color: #999999;
				padding: 31rpx 0 10rpx 30rpx;
			}
			.list{
				background-color: #FFFFFF;
				padding: 0 30rpx;
				.item{
					display: flex;
					justify-content: space-between;
					padding: 30rpx 0;
					border-bottom: 1rpx solid #EEEEEE;
					&.item_photo{
						align-items: center;
						.mtImg{
							border-radius: 100%;
							width: 110rpx;
							height: 110rpx;
						}
					}
					.item_title{
						color: #666666;
					}
					.item_text{
						&.item_adr{
							color: #666666;
							.isTarget{
								color: #000000;
							}
						}
						display: flex;
						align-items: center;
						input{
							font-size: $uni-font-size-base;
							text-align: right;
						}
						.item_text_back{
							margin-top: 4rpx;
						}
						.bank_sel{
							display: flex;
							align-items: center;
							margin-left: 50rpx;
							.bank_no{
								width: 36rpx;
								height: 36rpx;
								border: 5rpx solid #999999;
								border-radius: 100%;
								margin-right: 10rpx;
								&.bank_target{
									border-color: #007AFF;
									position: relative;
									&:before{
										content: '';
										position: absolute;
										width: 24rpx;
										height: 24rpx;
										background-color: #007AFF;
										border-radius: 100%;
										top: 2rpx;
										left: 2rpx;
									}
								}
							}
						}
					}
				}
			}
		}
	
		.footer{
			background-color: #FFFFFF;
			// margin-top: 100rpx;
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			width: 100%;
			height: 120rpx;
			.btn{
				padding: 15px;
			}
		}
		.h400{
			height: 400rpx;
		}
		.h60{
			height: 60rpx;
		}
	}
</style>
